<template>
  <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
    <li @click="refresh">
      <el-icon><Refresh /></el-icon>{{ $t("tabs.refresh") }}
    </li>
    <li @click="maximize">
      <el-icon><FullScreen /></el-icon>{{ $t("tabs.maximize") }}
    </li>
    <li @click="closeCurrentTab">
      <el-icon><Remove /></el-icon>{{ $t("tabs.closeCurrent") }}
    </li>
    <li @click="tabStore.closeTabsOnSide(route.fullPath, 'left')">
      <el-icon><DArrowLeft /></el-icon>{{ $t("tabs.closeLeft") }}
    </li>
    <li @click="tabStore.closeTabsOnSide(route.fullPath, 'right')">
      <el-icon><DArrowRight /></el-icon>{{ $t("tabs.closeRight") }}
    </li>
    <!-- <li @click="closeOtherTab">
      <el-icon><CircleClose /></el-icon>{{ $t("tabs.closeOther") }}
    </li> -->

    <li @click="tabStore.closeMultipleTab(route.fullPath)">
      <el-icon><CircleClose /></el-icon>{{ $t("tabs.closeOther") }}
    </li>
    <li @click="closeAllTab">
      <el-icon><FolderDelete /></el-icon>{{ $t("tabs.closeAll") }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { HOME_URL } from "@/config";
import { useRoute, useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
defineProps({
  visible: {
    type: Boolean,
    required: false
  },
  top: {
    type: Number,
    default: 0
  },
  left: {
    type: Number,
    default: 0
  }
});
const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const globalStore = useGlobalStore();
const keepAliveStore = useKeepAliveStore();

// refresh current page
const refreshCurrentPage: Function = inject("refresh") as Function;
const refresh = () => {
  setTimeout(() => {
    keepAliveStore.removeKeepAliveName(route.name as string);
    refreshCurrentPage(false);
    nextTick(() => {
      keepAliveStore.addKeepAliveName(route.name as string);
      refreshCurrentPage(true);
    });
  }, 0);
};

// maximize current page
const maximize = () => {
  globalStore.setGlobalState("maximize", true);
};

// Close Current
const closeCurrentTab = () => {
  if (route.meta.isAffix) return;
  tabStore.removeTabs(route.fullPath);
  // keepAliveStore.removeKeepAliveName(route.name as string);
};

// Close Other
// const closeOtherTab = () => {
//   tabStore.closeMultipleTab(route.fullPath);
//   keepAliveStore.setKeepAliveName([route.name] as string[]);
// };

// Close All
const closeAllTab = () => {
  tabStore.closeMultipleTab();
  // keepAliveStore.setKeepAliveName();
  router.push(HOME_URL);
};
</script>
